<template>
    <div>
        <!-- 菜单管理 -->
        <el-card class="el-main-card">
            <el-row :gutter="25">
                <el-col :span="10">
                    <!-- 搜索添加 -->
                    <el-input placeholder="请输入搜索内容" v-model="queryInfo.queryString" clearable @clear="findPage">
                        <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" v-has-role="['SUPER_ADMIN']"  @click="addShow">添加菜单</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表 -->
            <el-table :data="tableList" border stripe row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="index" label="序号"/>
                <el-table-column label="菜单标题" prop="title"/>
                <el-table-column label="后端路径" prop="path"/>
<!--                <el-table-column label="前端路径" prop="path"/>-->
                <el-table-column label="组件名称" prop="component"/>
                <el-table-column label="菜单图标" prop="icon"/>
                <el-table-column label="状态禁用" >-->
                    <template slot-scope="scope">
                        <el-switch
                                @change="updateStatus(scope.row)"
                                v-model="scope.row.status"
                                v-has-role="['SUPER_ADMIN']">
                        </el-switch>

                    </template>
                </el-table-column>
                <el-table-column label="操作" style="width: 100px">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="warning" v-show="scope.row.children != null" icon="el-icon-circle-plus-outline" size="mini" @click="addDialog(scope.row)"/>
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"/>
                        <el-button type="danger" v-has-role="['SUPER_ADMIN']" icon="el-icon-delete" size="mini" @click="deleteById(scope.row)"/>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePageNumber"
                    :current-page="queryInfo.pageNumber"
                    :page-sizes="[7, 15, 25, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">

            </el-pagination>
        </el-card>

        <!-- 菜单对话框 -->
        <el-dialog :title="title" v-loading="loading" :visible.sync="open" width="50%" @colse="dialogClosed">
            <el-form :model="dataForm" :rules="rulesDataForm" ref="dataForm" label-width="100px"

                     :label-position="left">
<!--               判断是否子级菜单-->
                <el-form-item label="是否是父级菜单" v-if="isChildrenMenu">
                    <el-checkbox v-model="isChildrenMenu" style="margin-left: -90%"/>
                </el-form-item>
                <el-form-item label="父级菜单" prop="icon" v-if="!isChildrenMenu">
                   <el-select style="width: 100%" v-model="dataForm.parentId" prop="parent
    Id" placeholder="请选择">
                       <el-option
                       v-for="(item,index) in parentList"
                       :key="index" :label="item.title" :value="item.id" :disabled="!item.status">

                       </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="前端路径" prop="path">
                    <el-input v-model="dataForm.path" @keyup.native="dataForm.code=dataForm.code.replace(/[^a-zA-Z_]/g,'')">
                    </el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon" style="width: 100%">
                    <el-select v-model="dataForm.icon" clearable filterable :popper-append-to-body="false" placeholder="请选择菜单图标">
                       <!-- <el-option
                                v-for="(item,index) in iconList"
                                :key="index"
                                :value="item.value"
                                style="font-size: 18px"
                                :class="item.value">
                            <span class="option-lable">{{item.value}}</span>
                        </el-option>
                        -->
                        <e-icon-picker v-model="dataForm.icon"/>

                    </el-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="dataForm.title"/>
                </el-form-item>
                <el-form-item label="前端组件" prop="component">
                    <el-input v-model="dataForm.component"/>
                </el-form-item>
                <el-table-column label="状态禁用" >
                    <template slot-scope="scope">
                        <el-switch
                                @change="updateStatus(scope.row)"
                                v-model="scope.row.status"/>

                    </template>
                </el-table-column>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clickCancel">取 消</el-button>
                <el-button type="primary" @click="clickOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name:'menu',
        data(){

            return{
                queryInfo:{
                    queryString: '',
                    pageNumber: 1,
                    pageSize: 7
                },
                //数据总条数
                total:0,
                //表格数据
                tableList:[],
                open: false,
                //表单标题
                title:'',
                //表单加载
                loading: false,
                //表单数据
                dataForm:[],
                //表单校验
                rulesDataForm:{
                    parentId: [
                        {

                            required: true,
                            //自定义表单规则
                            validator: (rule,value,callback)=>{
                                console.log('父级ID',value);
                                if(this.dataForm.parentId===null||this.dataForm.parentId===undefined){
                                    callback(new Error('请选择父级菜单'))
                                }else{
                                    callback()
                                }

            },
                            trigger: "change"
        },
                    ],
                    path: [
                        { required: true, message: "请输入菜单路径", trigger: "blur" },
                        {min:3, max:100,message: "路径长度在3-100之间",trigger: "change"}
                    ],
                    // icon: [
                    //     { required: true, message: "请选择菜单图标", trigger: "change" },
                    //     {min:2, max:50,message: "菜单图标在3-100之间",trigger: "change"}
                    // ],
                    title: [
                        { required: true, message: "请选择菜单标题", trigger: "change" },
                        {min:2, max:50,message: "菜单标题在3-100之间",trigger: "change"}
                    ],
                    component: [
                        { required: true, message: "请输入菜单组件", trigger: "blur" },
                        {min:5, max:50,message: "路径组件在5-50之间",trigger: "change"}
                    ],status: [
                        { required: true, message: "请选择是否启用", trigger: "blur" },
                    ]
                },
            //    父级菜单列表
                parentList:[],
                isChildrenMenu:true


            }
        },
        created() {
            this.findPage();
            this.findParent();
        },
        methods:{
            findPage(){
                this.$http.post("/system/menu/findMenu",this.queryInfo).then(res=>{

                    console.log('菜单初始化',res)
                    this.tableList=res.data.rows
                    this.total=res.data.total


                })
            },
            //删除权限
            deleteById(id) {
                this.$confirm('此操作将永久删除该权限信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //delete请求遵循restful风格
                    this.$http.delete(`/system/menu/delete/${id}`).then((res) => {
                        if (!res.data.flag) return this.$message.error(res.data.message);
                        this.$message.success(res.data.message);
                        this.queryInfo.pageNumber=1
                        this.findPage();
                    });
                }).catch(() => {
                    // 成功删除为confirm 取消为 cancel
                    return this.$message.info("操作已取消");
                });
            },

            //页数变化查询
            handlePageNumber(newPageNumber) {
                this.queryInfo.pageNumber = newPageNumber;
                this.findPage();
            },
            //页码变化查询
            handlePageSize(newPageSize) {
                this.queryInfo.pageSize = newPageSize;
                this.findPage();
            },
            //添加对话框
            addShow() {
                this.title = '添加菜单';
                this.dataForm = {};
                this.open = true;
            },
            //打开编辑对话框
            editDialog(row) {
                this.title = '编辑菜单';
                this.dataForm = row;
                this.open = true;
            },
            //添加子菜单框
            addDialog(row){
                this.title='添加子菜单';
                this.open=true
            },
            //改变菜单信息的状态
            updateStatus(row){
                this.$http.post('/system/menu/update',row).then(res=>{
                    this.$message.success('状态更新成功')

                });
            },
            //对话框关闭
            dialogClosed() {
                //重置表单

                this.$refs.dataForm.resetFields();
                this.isChildrenMenu=true
            },
            //点击取消
            clickCancel() {
                this.dataForm = {};
                this.open = false;
                this.isChildrenMenu=true
                this.findPage()
            }, //点击确定
            clickOk() {
                //表单校验
                this.$refs.dataForm.validate((valid) => {
                    if (!valid) return this.$message.error('表单校验不通过，请认真填写后提交！');
                    this.loading = true;
                    //判断是修改还是添加
                    if (this.dataForm.id === null || this.dataForm.id === undefined) {
                        //添加
                        this.$http.post('/system/menu/insert', this.dataForm).then((res) => {
                            if (!res.data.flag) {
                                setTimeout(() => {
                                    this.loading = false;
                                }, 6000);
                                return this.$message.error(res.data.message);
                            }
                            this.open = false;
                            this.loading = false;
                            this.$message.success(res.data.message);
                            // this.findPage();
                            this.$router.replace('/system/menu')
                        });
                    } else {
                        //修改
                        this.$http.post('/system/menu/update', this.dataForm).then((res) => {
                            if (!res.data.flag) {
                                setTimeout(() => {
                                    this.loading = false;
                                }, 6000);
                                return this.$message.error(res.data.message);
                            }
                            this.open = false;
                            this.loading = false;
                            this.$message.success(res.data.message);
                            this.findPage();
                        });
                    }
                });
            },
            findParent(){
                this.$http.get("/system/menu/findParent").then(res=>{
                    console.log('父级菜单查询',res)
                    this.parentList=res.data.data

                })
            }
        },

    }



</script>

<style>
    .status-class{
        margin-left: -75px;
    }
</style>
